<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-10 flex v-align-c">
      <span></span>
      <i>小程序直播</i>
    </h2>
    <h3 class="pancel-s-title">直播设置</h3>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="border-box near-box">
        <div class="mar-t--8 mar-b--19">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-checkbox v-model="details.propMap.isTitleShow">显示标题栏</el-checkbox>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
        <template v-if="details.propMap.isTitleShow">
          <div class="mar-t-1 mar-b--17">
            <el-form-item>
              <div>
                <el-input placeholder="最多5个字" maxlength="5" class="mini-s-input" v-model="details.propMap.liveTitle"/>
              </div>
            </el-form-item>
          </div>
          <div class="mar-b--13">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-checkbox v-model="details.propMap.isMoreShow">显示查看更多按钮</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </template>
      </div>
      <div class="border-box near-box">
        <h4>样式风格</h4>
        <div class="mar-t--5 mar-b--15">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showType" label="10">单列大图</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showType" label="11">单列横排</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showType" label="12">双列并排</el-radio>
                </el-col>
              </el-row>
            </div> 
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>底部样式</h4>
        <div class="mar-t--5 mar-b--15">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showStyle" label="10">卡片投影</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showStyle" label="11">描边白底</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.showStyle" label="12">无边白底</el-radio>
                </el-col>
                <el-col :span="12"></el-col>
              </el-row>
            </div> 
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>显示方式</h4>
        <div class="mar-t--5 mar-b--15">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.liveStyle" label="10">上下滑动</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.liveStyle" label="11">横向滑动</el-radio>
                </el-col>
              </el-row>
            </div> 
          </el-form-item>
        </div>
      </div>
      <div class="border-box near-box">
        <h4>选择直播间</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14 live-type-bar">
              <el-row>
                <el-col :span="12" class="mar-b--5">
                  <el-radio v-model="details.propMap.liveAddType" label="10">自动添加</el-radio>
                </el-col>
                <el-col :span="12" class="mar-b--5">
                  <el-radio v-model="details.propMap.liveAddType" label="11">手动添加</el-radio>
                </el-col>
              </el-row>
              <template v-if="details.propMap.liveAddType === '10'">
                <div class="tips-c-p">根据直播间状态自动显示直播间</div>
                <div class="flex tips-c-p">
                  <span>优先级：</span>
                  <label>
                    <i>1.直播中（暂停中）</i>
                    <i>2.未开始（预告）</i>
                    <i>3.已结束（回放）</i>
                  </label>
                </div>
              </template>
              <template v-if="details.propMap.liveAddType === '11'">
                <!-- 内容列表 -->
                <div class="pad-t-7">
                  <el-table class="mini-table" ref="multipleTable" :data="details.liveList" v-loading="listLoading"
                    element-loading-text="加载中" style="width: 100%" >
                    <el-table-column label="直播间信息" prop="title">
                      <template slot-scope="scope">
                        <div class="cursor-p font-12 font-color-6">
                          <div class="font-color mar-b-3">{{scope.row.name}}</div>
                          <div class="mar-t--5">开播：{{scope.row.startDate}}</div>
                          <div class="mar-t--5">结束：{{scope.row.endDate}}</div>
                          <div class="mar-t--5">主播：{{scope.row.anchor_name}}</div>
                          <div class="mar-t--5">状态：{{dict.liveStatus[scope.row.live_status]}}</div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" width="100px" label="操作">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="removeLive(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <!-- 添加按钮 -->
                <div class="flex add-actiy-btn mar-t-10 mar-b-10">
                  <el-button class="flex-item" @click="showLiveList">
                    <i class="el-icon-plus mar-r-5 font-20"></i>
                  </el-button>
                </div>
              </template>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="border-box">
        <h4>直播间数量</h4>
        <div class="mar-t--5">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.liveNum" label="10">显示所有</el-radio>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="details.propMap.liveNum" label="11">自定义</el-radio>
                </el-col>
              </el-row>
            </div> 
          </el-form-item>          
        </div>
        <div v-if="details.propMap.liveNum == 11">
          <el-form-item>
            <div class="flex font-12">
              <el-slider v-model="details.propMap.firstLoadNum" :min="1" :max="20" class="flex-item"></el-slider>
              <span class="pad-l-10">{{details.propMap.firstLoadNum}}(个)</span>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <component-live-layer :link="link" v-on:setLiveList="setLiveList"></component-live-layer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="linkSetVisible = false">关闭</el-button>
        <el-button type="primary" @click="saveLiveList">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'
  import { getDictByGroupName } from '@/api/common/common'
  import ComponentLiveLayer from '../ComponentLiveLayer'

  export default {
    components: { ComponentLiveLayer },
    props: {
      details1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {}
        },
        fullScreenLoading: null,
        pictureType: '1',
        listLoading: false,
        linkSetVisible: false,
        link: {
          liveList: []
        },
        dict: {
          liveStatus: {}
        }
      }
    },
    // 初始化页面
    created() {
      getDictByGroupName('LiveRoomDTO').then(response => {
        Object.assign(this.dict, response.data)
      })
      this.resetDetails()
      this.details = this.details1
      if (this.details.propMap) {
        this.$set(this.details.propMap, 'showType', this.details.propMap.showType ? this.details.propMap.showType.toString() : '10')
        this.$set(this.details.propMap, 'showStyle', this.details.propMap.showStyle ? this.details.propMap.showStyle.toString() : '10')
        this.$set(this.details.propMap, 'liveStyle', this.details.propMap.liveStyle ? this.details.propMap.liveStyle.toString() : '10')
        this.$set(this.details.propMap, 'liveAddType', this.details.propMap.liveAddType ? this.details.propMap.liveAddType.toString() : '10')
        this.$set(this.details.propMap, 'liveNum', this.details.propMap.liveNum ? this.details.propMap.liveNum.toString() : '10')
        this.$set(this.details.propMap, 'firstLoadNum', this.details.propMap.firstLoadNum ? this.details.propMap.firstLoadNum * 1 : 1)
        this.$set(this.details.propMap, 'isTitleShow', this.details.propMap.titleShow * 1 === 1)
        this.$set(this.details.propMap, 'isMoreShow', this.details.propMap.moreShow * 1 === 1)
      }
      if (this.details.liveList) {
        this.link.liveList = Array.from(this.details.liveList)
      }
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsLive', function(details) {
        that.details = details
        that.$set(that.details.propMap, 'showType', details.propMap.showType ? details.propMap.showType.toString() : '10')
        that.$set(that.details.propMap, 'showStyle', details.propMap.showStyle ? details.propMap.showStyle.toString() : '10')
        that.$set(that.details.propMap, 'liveStyle', details.propMap.liveStyle ? details.propMap.liveStyle.toString() : '10')
        that.$set(that.details.propMap, 'liveAddType', details.propMap.liveAddType ? details.propMap.liveAddType.toString() : '10')
        that.$set(that.details.propMap, 'firstLoadNum', details.propMap.firstLoadNum ? details.propMap.firstLoadNum * 1 : 1)
        that.$set(that.details.propMap, 'isTitleShow', details.propMap.titleShow * 1 === 1)
        that.$set(that.details.propMap, 'isMoreShow', details.propMap.moreShow * 1 === 1)
      })
    },
    methods: {
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {}
        }
      },
      showLiveList() {
        this.linkSetVisible = true
        this.$bus.$emit('updateLiveList')
      },
      removeLive(row) {
        this.details.liveList = this.details.liveList.filter(e => e.roomId !== row.roomId)
        this.link.liveList.splice(0, this.link.liveList.length)
        this.details.liveList.forEach(live => {
          this.link.liveList.push(live)
        })
      },
      saveLiveList() {
        this.details.liveList = Array.from(this.link.liveList)
        this.linkSetVisible = false
      },
      setLiveList(liveList) {
        this.link.liveList = liveList
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar{
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
  .category-style{
    color: #3abbdb
  }
  .link-container-list{
    margin-right: 20px;
    height: 440px;
    overflow: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 4px;    
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
      }
  }
  .pagination-box{
    position: relative;
    z-index: 20;
  }
  .pagination{
    position: absolute;
    right: 20px;
    top: 0px;
    width: 100%;
    z-index: 3000;
  }
</style>
